<template>
	<view>
		<view class="top-back">
			<view class="top-name">订单列表（{{count}}）</view>

			<view class="top-right top-right-left" @click="addAction">
				<view class="top-exit" @click="exportAction">导出</view>
			</view>
			<view class="top-right" :class="screenSelect?'top-right-select':''" @click="selectAction">
				<view :class="screenSelect?'top-contnet top-content-select': 'top-contnet'">筛选</view>
				<image v-if="!screenSelect" class="top-icon" src="../../../static/select.png"></image>
				<image v-if="screenSelect" class="top-icon" src="../../../static/select_select.png"></image>

			</view>
		</view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe emptyText=" ">
				<uni-tr>
					<uni-th align="center" width="60px">排序</uni-th>
					<uni-th align="center" width="80px">订单编号</uni-th>
					<uni-th align="center">商品名称</uni-th>
					<uni-th align="center" width="120px">客户名称</uni-th>
					<uni-th align="center">支付金额</uni-th>
					<uni-th align="center">下单人</uni-th>
					<uni-th align="center">下单时间</uni-th>
					<uni-th align="center">服务权益id</uni-th>
					<uni-th align="center">订单状态</uni-th>
					<uni-th align="center">操作</uni-th>

				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{index + 1}}</uni-td>
					<uni-td align="left">
						<view @click="detailAction(item)"><text selectable="true">{{item.no}}</text></view>
					</uni-td>
					<uni-td align="left"><text selectable="true">{{ item.goodsName}}</text></uni-td>
					<uni-td align="left"><text selectable="true">{{ item.custName }}</text></uni-td>
					<uni-td align="left"><text selectable="true">{{ item.paidAmt }}</text></uni-td>
					<uni-td align="left"><text selectable="true">{{ item.buyerName}}</text></uni-td>
					<uni-td align="left"><text selectable="true">{{ item.paidTime}}</text></uni-td>
					<uni-td align="left"><text selectable="true">{{ item.customerRights.id}}</text></uni-td>
					<uni-td align="center"><text selectable="true">{{ item.status.desc}}</text></uni-td>

					<uni-td align="center">
						<view style="display: flex;justify-content: center;">
							<view class="item-blue-text" @click="detailAction(item)">详情</view>
							<view style="margin-left: 12px;" v-if="item.status.code == 1" @click="cancelAction(item)"
								class="item-blue-text">取消</view>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>

			<view class="search-back" v-if="tableData.length == 0">
				<image class="search-image" :src="pc_search_nodata"></image>
				<view class="search-noresult">没有查询到结果</view>
			</view>
			<view style="margin-top: 10px;margin-bottom: 10px;" v-if="tableData.length > 0">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="count"
					@change="pageChange" />
			</view>
		</view>
		<orderDetail v-if="showDetail" :item='selectItem' @orderDetailClose='clickOrderDetailClose'></orderDetail>
		<popSelect v-model="showScreen" :x="screenx" :y="screeny" placement="top-end" dynamic>
			<view v-if="showScreen" class="screen-back">
				<uni-forms ref="baseForm" :modelValue="popData" style="width:200px;">
					<uni-forms-item>
						<uni-easyinput v-model="popData.no" placeholder="订单编号" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="popData.goodsName" placeholder="商品名称" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="popData.custName" placeholder="客户名称" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="popData.buyerName" placeholder="下单人" />
					</uni-forms-item>
					<uni-forms-item>
						<view style="display: flex;justify-content: space-between;">
							<view class="date-select-back" @click="openDatetimePicker(0)">
								<image class="dateimage" src="../../../static/pc_date.png"></image>
								<view v-if="popData.updatestart" class="date-select-time">
									{{popData.updatestart}}
								</view>
								<view v-else class="date-select-plac">下单时间起</view>
							</view>
							<view class="date-select-back" @click="openDatetimePicker(1)">
								<image class="dateimage" src="../../../static/pc_date.png"></image>
								<view v-if="popData.updateend" class="date-select-time">
									{{popData.updateend}}
								</view>
								<view v-else class="date-select-plac">下单时间止</view>
							</view>
						</view>
					</uni-forms-item>
					<view class="select-bottom">
						<view class="select-bottom-left" @click="selectReset">重置</view>
						<view class="select-bottom-right" @click="selectSureAction">筛选</view>
					</view>
				</uni-forms>
			</view>
			<dateTimeSelect :type='date' ref="myPicker" @submit="handleSubmit" :start-year="2022" :end-year="2030" />

		</popSelect>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="提示"
				content="若因已退款给客户等原因，可取消订单。取消后，对应的服务权益也会取消，确定要取消吗？" @confirm="dialogConfirm" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import popSelect from '@/components/popSelect/popSelect.vue'
	import uniselect from "@/packageB/PC/components/uni-data-select/uni-data-select.vue"
	import orderDetail from "@/packageB/PC/orderServe/orderDetail.vue"
	export default {
		components: {
			popSelect,
			uniselect,
			orderDetail
		},
		data() {
			return {
				showDetail: false,
				tableData: [],
				screenx: 0,
				screeny: 0,
				showScreen: false,
				popData: {
					'no': '',
					'goodsName': '',
					'custName': "",
					'buyerName': '',
					'updatestart': '',
					'updateend': ''
				},
				screenSelect: false,
				count: 0, // 数据总量
				pageSize: 10, // 每页数据量
				pageCurrent: 1, // 当前页
				selectItem: {},
				pc_search_nodata: getApp().globalData.baseImageUrl + '/pc_search_nodata.png'
			}
		},

		mounted() {
			this.requestData()
		},
		methods: {
			// 分页触发
			pageChange(e) {
				this.pageCurrent = e.current
				this.requestData()
			},
			//网络请求示例
			async requestData() {
				let _this = this
				let parmas = {
					size: _this.pageSize,
					page: _this.pageCurrent,
				};
				var url = "/admin/goodsOrder/list";
				if (this.screenSelect) {

					if (_this.popData.no) {
						this.$set(parmas, 'no', 'lk:' + _this.popData.no)
					}
					if (_this.popData.goodsName) {
						this.$set(parmas, 'goodsName', 'lk:' + _this.popData.goodsName)
					}
					if (_this.popData.custName) {
						this.$set(parmas, 'custName', 'lk:' + _this.popData.custName)
					}
					if (_this.popData.buyerName) {
						this.$set(parmas, 'buyerName', 'lk:' + _this.popData.buyerName)
					}

					if (_this.popData.updatestart && !_this.popData.updateend) {
						this.$set(parmas, 'paidTime', 'ge:' + _this.popData.updatestart)
					}
					if (!_this.popData.updatestart && _this.popData.updateend) {
						this.$set(parmas, 'paidTime', 'le:' + _this.popData.updateend)
					}
					if (_this.popData.updatestart && _this.popData.updateend) {
						this.$set(parmas, 'paidTime', 'bt:' + _this.popData.updatestart + ',' + _this
							.popData.updateend)
					}
				}

				const res = await this.$myRequest({
					url: url,
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.count = res.data.data.count;
					_this.tableData = res.data.data.list
				}
			},
			//导出
			exportAction() {
				uni.downloadFile({
					url: getApp().globalData.baseUrl + "/admin/goodsOrder/export",
					header: {
						"Content-Type": "application/x-xls",
						"Authorization": "Basic ZG90Z286ZG90Z28=",
						"token": uni.getStorageSync("accessToken") ? uni.getStorageSync("accessToken") : ''
					},
					success: function(res) {
						wx.hideLoading();
						uni.saveFile({

							tempFilePath: res.tempFilePath, //临时路径
							success: (resp) => {
								uni.openDocument({
									filePath: resp.savedFilePath,
									fileType: 'xls',
									showMenu: true,
									success: function(res) {
										console.log('打开文档成功')
									},
								});
							}
						})
					},
					fail: function(err) {
						wx.hideLoading();
						console.log('下载失败：', err);
					},
				});
			},

			async updataRequest() {
				this.requestData()
			},
			//点击筛选
			selectAction(e) {
				this.screenx = e.touches[0].clientX
				uni.getSystemInfo({
					success: res => {
						this.screenx = res.windowWidth - 30
					}
				})
				this.screeny = e.touches[0].clientY + 4
				this.showScreen = !this.showScreen
			},
			// 日期选择打开picker
			openDatetimePicker(index) {
				this.dateSelectIndex = index;
				this.$refs.myPicker.show();
			},

			// 日期选择关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			//日期选择
			handleSubmit(e) {
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
				console.log(e);
				var time = `${e.year}-${e.month}-${e.day} `;
				if (this.dateSelectIndex == 0) {
					this.popData.updatestart = time;
				} else if (this.dateSelectIndex == 1) {
					this.popData.updateend = time;
				}
			},

			//筛选重置
			selectReset() {
				this.popData = {
					'nickName': '',
					'realName': '',
					'mobile': "",
					'wxNo': '',
					'updatestart': '',
					'updateend': ''
				};
				this.screenSelect = false;
				this.requestData();

			},
			//类型选择
			typeChange(e) {
				console.log(e)
			},
			//筛选确认	
			selectSureAction() {

				if (this.popData.no == '' && this.popData.goodsName == '' && this.popData.custName == '' && this.popData
					.buyerName == '' && this.popData.updatestart == '' && this.popData.updateend == '') {
					uni.showToast({
						title: '请设置筛选条件',
						icon: "none"
					})
				} else {
					this.screenSelect = true;
					this.showScreen = !this.showScreen
					this.requestData()
				}
			},
			//详情
			detailAction(item) {
				console.log(item.id);
				this.selectItem = item;
				this.showDetail = true;
			},
			//取消
			cancelAction(item) {
				this.selectItem = item;
				this.$refs.alertDialog.open()
			},

			//取消
			async dialogConfirm() {
				console.log('点击确认')
				let _this = this
				let parmas = {
					'id': this.selectItem.id,
				}
				const res = await this.$myRequest({
					url: "/admin/goodsOrder",
					method: 'PUT',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.requestData();
				}
			},

			dialogClose() {
				console.log('点击关闭')
			},
			//新增
			addAction() {

			},
			clickOrderDetailClose() {
				this.showDetail = false;
			}
		}
	}
</script>

<style scoped>
	.top-back {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left: 30px;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}

	.top-content-select {
		color: #2DA9C5;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		margin-left: 16px;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.top-right-select {
		background-color: #E8F7FB;
	}

	.top-right-left {
		margin-left: auto;
	}

	.uni-container {
		margin-left: 40px;
		margin-right: 16px;
		width: auto;
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 150px;
		height: 150px;
	}

	.screen-back {
		padding: 10px;
		width: 300px;
	}

	.header-img {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		vertical-align: middle;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.top-exit {
		width: 56px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select-bottom {
		display: flex;
	}

	.select-bottom-left {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #333;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.select-bottom-right {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #fff;
		background: #8ED8E9;
		border-radius: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 0px;
		margin-left: auto;
	}

	.date-select-back {
		width: 130px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}

	.dateimage {
		width: 16px;
		height: 16px;
		margin-left: 10px;
		margin-right: 3px;
	}

	.date-select-plac {
		font-size: 12px;
		color: #999999;
	}

	.date-select-time {
		font-size: 12px;
		color: #333333;
	}
</style>